﻿@{
    ViewBag.Title = "Plateau";
}

<link rel="stylesheet" type="text/css" href="/Content/plateau.css"></link>

@section scripts
{
    <script type="text/javascript" src="/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript" src="/Scripts/App/marsrovers.js"></script>
    <script type="text/javascript" src="/Scripts/App/movementstrategy.js"></script>
    <script type="text/javascript" src="/Scripts/App/rover.js"></script>
    <script type="text/javascript" src="/Scripts/App/plateauview.js"></script>

    <script type="text/javascript">
        $(function () {
            MARSROVERS.PLATEAVIEW.initialize();
        });
    </script>
}

<div id="plateauConfiguration" data-bind="visible: PlateauView">

    <h2>Plateau Configuration</h2>

    <div class="inputDiv">
        <label for="plateauXCordinate">X</label>
        <input type="number" id="plateauXCordinate" required="required" />
    </div>

    <div class="inputDiv">
        <label for="plateauYCordinate">Y</label>
        <input type="number" id="plateauYCordinate" required="required" />
    </div>

    <button class="button" data-bind="click: btnContinueClick">Continue</button>
</div>

<div id="roverDiv" data-bind="visible: RoverView">
    <div id="roverMenuDiv" data-bind="visible: RoverMenuPartialView">

        <h2>Menu</h2>
        <ul id="roverMenu">
            <li><a href="#" data-bind="click: btnNewRoverClick">New Rover</a></li>
        </ul>

        <div class="rover-positions" data-bind="visible: Rovers().length === 0">
            <h3>There are not Rovers</h3>
        </div>

        <div class="rover-positions" data-bind="visible: Rovers().length > 0">
            <h3>Rovers:</h3>
            <div data-bind="template: { name: 'roverfinalposition-template', foreach: Rovers }"></div>
        </div>

        <!--<button class="button" data-bind="click: btnBackToPlateauConfigClick">Back to Plateau Configuration</button>-->
         <div class="footer-menu">
             <a href="#" class="back-link" data-bind="click: btnBackToPlateauConfigClick">Back</a>
          </div>
    </div>

    <div id="roverConfigDiv" data-bind="visible: RoverConfigPartialView">
        <h2>Rover Configuration</h2>
        <fieldset>
            <legend>Position</legend>
            <div class="inputDiv">
                <label for="roverXCoordinate">X Coordinate</label>
                <input type="text" id="roverXCoordinate" />
            </div>
            <div class="inputDiv">
                <label for="roverYCoordinate">Y Coordinate</label>
                <input type="text" id="roverYCoordinate" />
            </div>
            <div class="inputDiv">
                <label for="orientation">Orientation</label>
                <select id="orientation">
                    <option value="N">N</option>
                    <option value="W">W</option>
                    <option value="S">S</option>
                    <option value="E">E</option>
                </select>
            </div>
            
            <div class="footer-menu">
                <a href="#" class="back-link" data-bind="click: btnBackToMenu">Back</a>
                <button class="button" data-bind="click: btnGoToInstructionsClick">Go to instructions</button>
            </div>

        </fieldset>
    </div>

    <div id="roverInstructionsDiv" data-bind="visible: RoverInstructionsPartialView">

        <div class="inputDiv">
            <label for="instructions">Instructions </label>
            <input type="text" id="instructions" data-bind="event: { keypress: txtBoxInstructionKeyPress }" />
        </div>
        <div>
            <ul class="movements" data-bind="foreach: Movements">
                <li><span data-bind="text: $data"></span></li>
            </ul>
        </div>
        <div class="footer-menu">
            <button class="button" data-bind="click: btnStopMovingClick">Stop Moving</button>
        <div class="footer-menu">
    </div>

</div>

<script type="text/html" id="roverfinalposition-template">

    <div class="roverFinalPosition">
        <span>Rover<span style="padding-left: 3px" data-bind="text: $index"></span>,</span>
        <span>Position: 
            <span style="font-weight: bold; font-size: 18px;">
                <span data-bind="text: Position.X"></span>
                <span data-bind="text: Position.Y"></span>
                <span data-bind="text: Orientation"></span>
            </span>
        </span>
    </div>

</script>
